import React from 'react'
import Tabbar from '@/components/tabbar/Tabbar'

import { Cookbook } from './cookbook'
import { Category } from './category'
import { More } from './more'

import cookbook from '@/assets/images/cookbook.png'
import activeCookbook from '@/assets/images/cookbook-active.png'
import menu from '@/assets/images/menu.png'
import activeMenu from '@/assets/images/menu-active.png'
import location from '@/assets/images/location.png'
import activeLocation from '@/assets/images/location-active.png'
import more from '@/assets/images/more.png'
import activeMore from '@/assets/images/more-active.png'

export default function Home() {
  return (
    <Tabbar
      bgColor="#f9f9f9"
      color="#ccc"
      tintColor="#000"
    >
      <Tabbar.Item
        title="美食大全"
        icon={<img width="22" height="22" src={cookbook}></img>}
        activeIcon={<img width="22" height="22" src={activeCookbook}></img>}
      >
        <Cookbook></Cookbook>
      </Tabbar.Item>
      <Tabbar.Item
        title="分类"
        icon={<img width="22" height="22" src={menu}></img>}
        activeIcon={<img width="22" height="22" src={activeMenu}></img>}
        
      >
        <Category></Category>
      </Tabbar.Item>
      <Tabbar.Item
        title="地图"
        icon={<img width="22" height="22" src={location}></img>}
        activeIcon={<img width="22" height="22" src={activeLocation}></img>}
        
      >
        <Category></Category>
      </Tabbar.Item>
      <Tabbar.Item
        title="更多"
        icon={<img width="22" height="22" src={more}></img>}
        activeIcon={<img width="22" height="22" src={activeMore}></img>}
      >
        <More></More>
      </Tabbar.Item>
    </Tabbar>
  )
}
